<template>
  <el-container>
    <el-header>
      <div style="float: right;">
        <el-tag v-for="item in navigation">{{item.nameZh}}</el-tag>
        <el-divider direction="vertical"></el-divider>
        <el-tag>登录</el-tag>
        <el-tag type="success">注册</el-tag>
        <el-tag type="info">退出</el-tag>
      </div>
    </el-header>
    <el-main>
      <router-view :dbList="dbList" @addLocalSearchRecord="addLocalSearchRecord"/>
    </el-main>
    <el-footer>
      <!--      Footer-->
    </el-footer>
  </el-container>
</template>

<script>
    import * as KNOWLEDGEBASE from "@/api/web/knowledgeBase";

    export default {
        name: "index",
        data() {
            return {
                navigation: [],
                dbList: [],
            }
        },
        mounted() {
            this.getNavigation();
            this.getDb();
        },
        methods: {
            getNavigation() {
                KNOWLEDGEBASE.getNavigation().then(response => {
                    this.navigation = response.data.list;
                });
            },
            getDb() {
                KNOWLEDGEBASE.getDb().then(response => {
                    this.dbList = response.data.list;
                });
            },
            addLocalSearchRecord(queryData) {
                let querystore = JSON.parse(this.$cache.local.get("QUERYSTORE") || "[]");
                let length = querystore.filter(x => x.q == encodeURIComponent(queryData.searchWord)).length;
                if (length == 0) {
                    if (queryData.searchWord) {
                        const data = {
                            q: encodeURIComponent(queryData.searchWord),
                            t: Date.now()
                        };
                        querystore.splice(0, 0, data);
                        if (querystore.length > 6) {
                            querystore.splice(6);
                        }
                        this.$cache.local.set("QUERYSTORE", JSON.stringify(querystore));
                    }
                }
            },
        }
    }
</script>

<style scoped>
  .el-tag {
    margin: 10px 10px;
  }

</style>
